iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0
自我挑戰組

JavaScript DOM 操作系列 第 9

DAY 9: 動態切換樣式表

  • 分享至 

  • xImage
  •  

今天我學到了如何用 JavaScript 動態切換頁面的 CSS 樣式表,這樣可以讓網站根據不同需求快速改變外觀,感覺真的很實用。舉個例子,如果想要讓使用者自行選擇不同的風格,就可以用這種方式來實現。

  1. 基本範例:

https://ithelp.ithome.com.tw/upload/images/20240923/20169384fzkkgTPpnO.png

按下按鈕後,頁面會從一種風格切換到另一種。

  1. 結果範例:

https://ithelp.ithome.com.tw/upload/images/20240923/20169384KJXYZBq36R.png

當按下切換按鈕後,背景從淺藍色變為深藍色,字體顏色也隨之變化,看著自己操作頁面瞬間變化真的超有趣。

  1. 補充範例:簡單的樣式切換:

https://ithelp.ithome.com.tw/upload/images/20240923/201693844MSoyoVc4Z.png

這個例子將樣式切換的功能拆分成多行程式碼,使得結構更為清晰,也讓理解和操作變得更加直觀。透過這些技術的學習,感覺自己對網頁開發的掌握又深入了一步。


上一篇
DAY 8: 修改內聯樣式
下一篇
DAY 10: 事件處理簡介
系列文
JavaScript DOM 操作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言